<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
import * as echarts from 'echarts'

const route = useRoute()
const loading = ref(false)
const teacherData = ref(null)

// 获取教师详细分析数据
const fetchData = async () => {
  loading.value = true
  try {
    const teacherId = route.params.id
    const res = await axios.get(`/api/admin/teacher-analysis/${teacherId}/detail`)
    if (res.data?.code === '200') {
      teacherData.value = res.data.data
      await nextTick() // 等待DOM渲染
      initChart()
    }
  } catch (error) {
    console.error('获取教师详细数据失败:', error)
  }
  loading.value = false
}

// 初始化图表
const initChart = () => {
  if (!teacherData.value) return
  const dom = document.getElementById('emotionTrendChart')
  if (!dom) return
  const chart = echarts.init(dom)
  const option = {
    title: {
      text: '教师情绪趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      top: 30
    },
    xAxis: {
      type: 'category',
      data: teacherData.value.dates || []
    },
    yAxis: {
      type: 'value',
      name: '情绪值'
    },
    series: [
      {
        name: '快乐',
        type: 'line',
        smooth: true,
        data: teacherData.value.happinessRates || []
      },
      {
        name: '生气',
        type: 'line',
        smooth: true,
        data: teacherData.value.angerRates || []
      },
      {
        name: '平静',
        type: 'line',
        smooth: true,
        data: teacherData.value.neutralRates || []
      }
    ]
  }
  chart.setOption(option)
}

onMounted(() => {
  fetchData()
})
</script>

<template>
  <div class="teacher-detail" v-loading="loading">
    <div v-if="teacherData">
      <div class="page-header">
        <h2>{{ teacherData.teacherName }} - 教学分析详情</h2>
      </div>

      <el-card>
        <div id="emotionTrendChart" style="height: 400px;"></div>
      </el-card>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
  </div>
</template>

<style scoped>
.teacher-detail {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}
.page-header h2 {
  color: #000;
}
</style> 